@media screen and (min-width: 1080px) {
    html {
      font-size: 37.5px !important;
    }
  }

a{
    text-decoration: none;

}
li{
    
    list-style: none;
    
}
*{

    padding: 0;
    margin: 0;
}
/* body样式 */
body{
    width: 100%;
    
    max-width: 1080px;
    min-width: 320px;
    font: normal .373333rem/1.5 'Source Han Sans Normal',Arial,Helvetica,STHeiTi,sans-serif;
    margin: 0 auto;

  
    color:#000;
    background: #f2f2f2;

}
/* body样式---------------------------------------- */

/* header样式 */

header{
    position: fixed;
    display: flex;
    transform: translateX(-50%);
    flex-direction: row;
    justify-content: space-between;
    top: 0;
    left: 50%;
    
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    z-index: 999;

    height: 1.76rem;
    width: 100%;
    
    
    //左部图片
    img{
        
        width: 4.16rem;
        height: 100%;
        z-index: 1;
        margin-right: .533333rem;
        margin-left: .133333rem;
    }
    // 民族汇背景
    .bg{
        position: absolute;
        width: 4.16rem;
        height: 1.333333rem;
        top:.133333rem;
        left:.133333rem;
    }


    //中间表单
    a{
        flex: 1;
        position: relative;
        input{
           
            position: absolute;
            left: 0;
            top: .133333rem;
            padding-left: 1.066667rem;
            width: 100%;
            height: 80%;
            border-radius: .133333rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);;
            border: 1px solid #ccc;
            font-size: .64rem;
            color: #666;
                
            
        }
        //放大镜伪元素
        &::before{
            float: left;
            content: "";
            display: block; 
            width: .8rem;
            height: .8rem;
            background: url('../icons/sprite.png') no-repeat -3.146667rem -14.88rem;            
            background-size: 5.546667rem auto;
            margin-top: .426667rem;
            margin-left: .266667rem;
            margin-right: .106667rem;
            
        }
    }


    //右部盒子
    .right{
        width: 2.666667rem;
        height: 100%;
        margin-left: .533333rem;
    }
    // 右部搜索栏
        .sousuo{
            // 盒子设置
            margin-top: .186667rem;
            margin-bottom: .266667rem;
            width: 2.4rem;
            height: 1.2rem; 
            background-color: red;
            border-radius: 2.133333rem;

            //字体设置
            color: #fff;
            padding-top: .133333rem;
            font-size: .64rem; 
            text-align: center;
            font-weight: 500;
        }
    
}

// 轮播图样式
.focus{
    position: relative;
    padding-top: 1.866667rem;
    width: 100%;
    overflow: hidden;
    
}

.focus ul{
    display: flex;
    width: 500%;

    margin-left: -100%;
    
}

.focus ul li {
    width: 20%;
    padding-left: .24rem;
    padding-right: .24rem;
    height: 205.63px;
    
    
}

.focus img{
    width: 100%;
    height: 100%;
    border-radius: .346667rem;
}

.focus ol{
    position: absolute;
    bottom: 5px;
    right: 5px;
}   

.focus ol li {
    float:  left;
    width: 5px;
    height:  5px;
    margin-left: 5px;
    background-color: #fff;
    border-radius: 5px;
    list-style: none;
    transition: all .3s;
   
}

.focus ol .current{
    width: 15px;
}

//  新闻轮播样式
.news{
    // overflow: hidden;
    height: 1.6rem;
     
    //大盒子样式
    .big{
        display: flex;
        height: 100%;
        margin-left: .24rem;
        margin-right: .24rem;
        background-color: #fff;
        border-top: 1px solid transparent;
        border-bottom-right-radius: .346667rem;
        border-bottom-left-radius: .346667rem;
        // 最近更新样式
        h5{
            height: 1.6rem;
            font-size: .8rem;
            padding-left: .533333rem;
            line-height: 1.6rem;
            padding-right: .533333rem;
            }
        // 新闻轮播条样式
        .right{
            flex:1;
            font-size: .693333rem;
            overflow: hidden;
            ul{ 
                li{
                    line-height: 1.6rem;                   
                    span{         
                        background-color: #feefec;
                        color: #e86217;
                        border-radius: 4px;
                        padding: 0 6px;
                        }
                        a{
                            color:#ccc;
                        }
                    }
                }
                }
                
            }

}
 

// Tab栏样式
.tab{
    height: 5rem;
    //
    ul{
        margin-top: .266667rem;   
        height: 100%;
        display: flex;
        flex-direction: row;
        margin-left: .24rem;
        margin-right: .24rem;
        background-color: #fff;
        border-top-left-radius: .346667rem;
        border-top-right-radius: .346667rem;
        // 
        li{
            position: relative;
            flex: 1;
            
            padding: 1.066667rem .6rem;
            padding-top: .533333rem;
            font-size: .6rem;
            margin-top: .1rem;
            //下部文字样式
            a{
                color: #666;
                text-align: center; 
            }
            //Tab图标样式
            img{
                
                width: 100%;
                margin-bottom: .266667rem;
            }
            // 图标右上侧标记
            .iconSituation{
                position: absolute;
                top:.133333rem;
                right: -0.266667rem;
                width: 1.3rem;
            }
            
        }
        & li:nth-child(1) {
            padding-top: .8rem; 
        }
        & li:nth-child(3) {
            padding-top: .6rem;  
        }
    }
}


// 平台精选

.recommend{
    // 推荐大盒子
    display: flex;
    flex-direction: column;
    
    margin-left: .24rem;
    margin-right: .24rem;
    margin-top: .266667rem;
    margin-bottom: 2.666667rem;
    background-color: #fff;
    border-top-right-radius: .346667rem;
    border-top-left-radius: .346667rem;
    //推荐头部样式
    .header{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
    // 推荐
        h5{
            height: 1.6rem;
            font-size: .933333rem;
            padding-left: 0.533333rem;
            line-height: 1.6rem;
            padding-right: 0.533333rem;
        }
        // 更多
        a{
            color: #707070; 
            font-size: .666667rem;
            padding-top: .4rem;
            padding-right: .4rem;
        
        }
        // 换一换
        div{
            //刷新图标
            .refresh{
                position: absolute;
                top: .4rem;
                left: -25%;
                bottom: .266667rem;
                width: 1rem;
                height: 1rem;
                background: url('../icons/刷新.png') no-repeat;
                background-size: 1rem auto;
                
            }
            position: relative;
            color: #707070; 
            font-size: .666667rem;
            padding-top: .4rem;
            padding-right: .4rem;
            padding-left: .4rem;
        }

    }
    //内容样式
    .content{
        position: relative;
        flex: 1;
        height: 8rem;
        padding-top: 2.533333rem;
        padding-left: 0.533333rem;
        padding-bottom: 3rem;
        border-bottom: 0.026667rem solid #ccc;
        box-sizing: content-box;
        // 头像盒子样式
        div.headerimg{
            display: flex;
            position: absolute;
            top: .266667rem;
            left: .533333rem;
            width: 5.333333rem;
            height: 2.133333rem;
            //头像样式
            img{
                width: 1.733333rem;
                height: 1.733333rem;
                border-radius: 1.066667rem;
            }
            //头像名称 
            span{
                flex:1;
                font-size: .746667rem;  
                padding-top: 8%;
                padding-left: 5%;
            }
        }
        // 内容标题样式
        h6{
            font-size: .853333rem;
            font-weight: 700;
            // 头像右部菜单样式
            .caidan{
                position: absolute;
                right: .266667rem;
                top: .533333rem;
                height: 1.066667rem;
                width: 1.066667rem;
            }

            // 菜单样式
            .caidanlist{
                display: flex;
                flex-direction: column;
                position: absolute;
                right: 2.2rem;
                top: .533333rem;
                height: 4rem;
                width: 5.333333rem;
                border-radius: .4rem; 
                background-color: #fff;
                display: none;
                z-index: 999;
                h6{
                    flex: 1;
                    font-weight: 400;
                    font-size: .8rem;
                    text-align: center;
                    line-height: 1.333333rem;
                    border-bottom: 1px solid #ccc;
                }
                //三角形样式
                div{
                    position: absolute;
                    top: .266667rem;
                    box-sizing: content-box;
                    right: -.8rem;
                    width: 0; 
                    height: 0;
                    border-top: .266667rem solid #fff;
                    border-left: .533333rem solid #fff;
                    border-right: .533333rem solid transparent;
                    border-bottom: .266667rem solid transparent;
                    
                }


            }
        }

        // 正文样式
        p{
            padding-top: .266667rem;     
            font-size: .746667rem;
            
            overflow: hidden;
            text-overflow: ellipsis; 
            display:-webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        // 内容图片盒子样式 
        .img{
            
            display: flex;
            width: 100%;
            flex-direction: row;
            justify-content: space-between;
            margin-top: .4rem;
            margin-bottom: .4rem;
            // 内容图片样式
            img{
                border-radius: .133333rem;
                width: 33%;
                height: 4rem;
            }
            
        }
        // 图片下部标签样式
        .tag{
            position: absolute;
            left: 0.533333rem;
            bottom: 1.66667rem;
            background-color: rgba(204, 204, 204, 0.7);
            padding-left: 1.333333rem;
            padding-right: 1.2rem;
            font-size: 0.666667rem;
            line-height: 1.066667rem;
            border-radius: 0.666667rem;
            color: black;
            vertical-align: bottom;
            // 标签内图标样式
            img{
                position: absolute;
                top: .213333rem;
                left: .533333rem;
                width: .666667rem;
                height: .666667rem;
            }
            // 三角标记样式
            .tri{
                position: absolute;
                right: .266667rem;
                top: .32rem;
                width: 0;
                height: 0;
                box-sizing: content-box;
                border: .213333rem solid transparent;
                border-left: .213333rem solid black;
            }
        
        }
        // 内容底部功能样式
        .function{
            display: flex;
            position: absolute;      
            right: .533333rem;
            bottom: .266667rem;
            width: 100%;
            height: 1.066667rem;
            font-size: .64rem;
            color: #707070; 
            line-height: 1.066667rem;
            vertical-align: bottom;
            // 文字样式
            span{
                position: relative;
                padding-left: 1.333333rem;
                flex:1;
                // 图标样式
                img{
                    position: absolute;
                    left: 0;
                    top: .186667rem;
                    width: .666667rem;
                    height: .666667rem;
                }
            }
            // 阅读量样式
            .readNum{
                flex:40%;
            }
        }

    }
    
    
}

//底部导航栏

.footer{
    position: fixed;
    
    bottom: 0;
    left: 0;
    height: 2.666667rem;
    width: 100%;
    background-color:#fff;
    ul
    {   display: flex;
        .current{
            a{
            color: #d81e06!important;

        }
            
        } 
        li{
            position: relative;
            flex: 1;
            padding-top: .533333rem;
            text-align: center;
            a{  
                width: 100%;
                text-decoration: none;
                color: black;
                font-size: .693333rem;
                
                img{
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    top: .133333rem;
                    width: 30%;          
                }
                span{
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    top: 1.2rem;
                }
                
            }
            .story {
                position: absolute;
                width: 3rem;
                height: 3rem;
                border-top-left-radius: 3rem;
                border-top-right-radius: 3rem;
                background-color: #fff;
                top: -0.666667rem;
                left: 50%;
                transform: translateX(-50%);
                .first{
                    position: absolute;
                    top: .533333rem;
                    left: .266667rem;
                    width: 2.5rem;
                    // display: none;
                }
                .second{
                    position: absolute;
                    width: 4.5rem;
                    left: -0.8rem;
                    bottom: .32rem; 
                    // display: none;
                }
                
            }
            
        }

    }
}

